<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>菜谱管理 - 管理后台</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../../assets/css/common.css">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="index.html"><i class="fas fa-tools"></i> 管理后台</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item"><a class="nav-link" href="index.html"><i class="fas fa-chart-line"></i> 数据统计</a></li>
                    <li class="nav-item"><a class="nav-link active" href="recipes.html"><i class="fas fa-book"></i> 菜谱管理</a></li>
                    <li class="nav-item"><a class="nav-link" href="ingredients.html"><i class="fas fa-carrot"></i> 食材管理</a></li>
                    <li class="nav-item"><a class="nav-link" href="users.html"><i class="fas fa-users"></i> 用户管理</a></li>
                </ul>
                <ul class="navbar-nav">
                    <li class="nav-item"><a class="nav-link" href="#" onclick="logout()"><i class="fas fa-sign-out-alt"></i> 退出登录</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container-fluid mt-4">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span><i class="fas fa-book"></i> 菜谱管理</span>
                <button class="btn btn-primary btn-sm" onclick="showAddForm()">
                    <i class="fas fa-plus"></i> 添加菜谱
                </button>
            </div>
            <div class="card-body">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>菜谱名称</th>
                            <th>菜系</th>
                            <th>难度</th>
                            <th>时间</th>
                            <th>浏览量</th>
                            <th>收藏量</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="recipeList"></tbody>
                </table>
                <nav id="pagination"></nav>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/layer/3.5.1/layer.min.js"></script>
    <script src="../../assets/js/config.js"></script>
    <script src="../../assets/js/request.js"></script>
    <script>
        let currentPage = 1;

        $(document).ready(function() {
            if (!checkAuth()) return;
            const user = getUser();
            if (user.role !== 'ADMIN') {
                layer.msg('无权限访问');
                setTimeout(() => window.location.href = '../user/index.html', 1500);
                return;
            }
            loadRecipes();
        });

        function loadRecipes(page = 1) {
            currentPage = page;
            request(`${API_ENDPOINTS.ADMIN_RECIPE_LIST}?pageNum=${page}&pageSize=10`, { method: 'GET' }).done(function(res) {
                if (res.code === 200) {
                    renderRecipes(res.data.records);
                    renderPagination(res.data.pages);
                }
            });
        }

        function renderRecipes(recipes) {
            let html = '';
            recipes.forEach(recipe => {
                const statusBadge = recipe.status === 1 ? '<span class="badge bg-success">上架</span>' : '<span class="badge bg-secondary">下架</span>';
                html += `
                    <tr>
                        <td>${recipe.id}</td>
                        <td>${recipe.name}</td>
                        <td>${recipe.cuisineType || '-'}</td>
                        <td><span class="badge bg-${DIFFICULTY_CLASS[recipe.difficulty]}">${DIFFICULTY_MAP[recipe.difficulty]}</span></td>
                        <td>${recipe.cookingTime}分钟</td>
                        <td>${recipe.viewCount}</td>
                        <td>${recipe.collectCount}</td>
                        <td>${statusBadge}</td>
                        <td>
                            <button class="btn btn-sm btn-danger" onclick="deleteRecipe(${recipe.id})">删除</button>
                        </td>
                    </tr>
                `;
            });
            $('#recipeList').html(html || '<tr><td colspan="9" class="text-center">暂无数据</td></tr>');
        }

        function renderPagination(pages) {
            if (pages <= 1) {
                $('#pagination').html('');
                return;
            }
            let html = '<ul class="pagination justify-content-center">';
            for (let i = 1; i <= pages; i++) {
                html += `<li class="page-item ${i === currentPage ? 'active' : ''}">
                    <a class="page-link" href="#" onclick="loadRecipes(${i}); return false;">${i}</a>
                </li>`;
            }
            html += '</ul>';
            $('#pagination').html(html);
        }

        function showAddForm() {
            layer.msg('请通过后端接口添加菜谱，前端简化版暂不支持');
        }

        function deleteRecipe(id) {
            layer.confirm('确定要删除此菜谱吗？', { btn: ['确定', '取消'] }, function(index) {
                request(`${API_ENDPOINTS.ADMIN_RECIPE}/${id}`, { method: 'DELETE' }).done(function(res) {
                    if (res.code === 200) {
                        layer.msg('删除成功');
                        loadRecipes(currentPage);
                    }
                    layer.close(index);
                });
            });
        }
    </script>
</body>
</html>

